<template>
<div>
  <div class="scroll-container">
    <p>第一条需要滚动的文本</p>
    <p>第二条需要滚动的文本</p>
    <p>第三条需要滚动的文本</p>
  </div>
</div>
</template>

<script>
// 盒模型
export default {
  name: "box"
}
</script>

<style scoped>
.scroll-container {
  overflow: hidden; /* 隐藏溢出部分的文本 */
}

.scroll-container p {
  animation: scroll 10s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}
</style>